<template>
  <view class="container login_container">
    <view class="login_content">
      <view class="login_logo"></view>
      <view class="login_main_type">
        <button class="login_main_type_item" @tap="login">
          <text>微信登陆</text>
        </button>
      </view>
    </view>
    <view class="login_footer">
      <view class="login_protocol">
        <view
          :class="['login_check_icon', isAgree ? 'checked' : '']"
          @tap="setIsAgree"
        ></view>
        <view class="login_block">
          我已阅读并同意
          <navigator class="link">用户协议</navigator>
          和
          <navigator class="link">隐私声明</navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// import { loginApi, getUserInfoApi } from "@/api/user";
import { useUserStore } from "@/store/user";

const isAgree = ref(false);
const setIsAgree = () => {
  isAgree.value = !isAgree.value;
};

const userStore = useUserStore();

const login = () => {
  if (!isAgree.value) {
    uni.showToast({
      title: "请阅读并同意用户协议和隐私声明",
      icon: "none",
    });
    return;
  }

  // 登录
  // 1. 获取code
  uni.login({
    async success(res) {
      // 获取token，获取用户数据
      await userStore.login(res.code);
      uni.navigateBack();
    },
    fail(err) {
      // console.log(err);
      uni.showToast({
        title: "登录失败",
        icon: "error",
      });
    },
  });
};

// const login = () => {
//   if (!isAgree.value) {
//     uni.showToast({
//       title: "请阅读并同意用户协议和隐私声明",
//       icon: "none",
//     });
//     return;
//   }

//   // 登录
//   // 1. 获取code
//   uni.login({
//     async success(res) {
//       // 2. 获取token
//       const { token } = await loginApi(res.code);
//       // 3. 将token存储起来
//       uni.setStorageSync("token", token);
//       // 4. 发送请求携带token参数
//       // 5. 获取用户数据
//       const {
//         item: { nickname, avatar },
//       } = await getUserInfoApi();
//       // 6. 存储起来
//       uni.setStorageSync("user", {
//         nickname,
//         avatar,
//       });
//       // 7. 返回
//       uni.navigateBack();
//     },
//     fail(err) {
//       // console.log(err);
//       uni.showToast({
//         title: "登录失败",
//         icon: "error",
//       });
//     },
//   });
// };
</script>
<style lang="scss" scoped>
.login_container {
  background: #00cc99;
  border-top: 1rpx solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .login_content {
    padding: 0 36px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
    .login_logo {
      width: 72px;
      height: 72px;
    }
    .login_main_type {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 48px;

      .login_main_type_item {
        height: 56px;
        margin-bottom: 24px;
        border-radius: 30px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
        text-align: center;
        image {
          width: 26px;
          height: 26px;
        }
        text {
          margin-left: 8px;
          color: #333;
          font-size: 18px;
        }
      }
    }
    .login_more {
      color: #fff;
      font-size: 14px;
    }
  }
  .login_footer {
    .login_protocol {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      .login_block {
        display: flex;
        color: #333;
      }
      .login_check_icon {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 24px 48px;
        background-image: url("https://8.idqqimg.com/edu/mobilev2/m-core/1f3256dafe9eb438879b434bd4105394.png");
        background-position: 0 0;
        &.checked {
          background-position: 0 -24px;
        }
      }
      .link {
        color: #fff;
      }
    }
  }
}
</style>
